<template>
    <div>
        <!-- 三级分类 -->
        <category @getId="getId" :disabled="isShow===1"></category>
        <!-- 内容区 --> 
        <el-card class="mt-10">
            <spuList v-if="isShow===1" v-model="isShow" :categoryIdList="categoryIdList" @sendSpuInfo="saveSpuInfo"></spuList>
            <spuForm v-if="isShow===2" v-model="isShow" :category3Id="categoryIdList.c3Id" :spuInfo="spuInfo" @reset="resetSpu"></spuForm>
            <skuForm v-if="isShow===3" v-model="isShow"></skuForm>
        </el-card>       
    </div>
</template>

<script>

</script>
<script>
import category from '@/components/category/index.vue'
import spuList from './spuList/index.vue'
import spuForm from './spuForm/index.vue'
import skuForm from './skuForm/index.vue'

export default {
    name: "VSpu",
    data() {
        return {
            isShow:1,    //展示哪一个组件,默认list
            categoryIdList:{
                c1Id:undefined,  //一级分类id
                c2Id:undefined,  //二级分类id
                c3Id:undefined,   //三级分类id
             },
             spuInfo :{}  //接收spuInfo
        }
    },
    methods: {
        //重置spu
        resetSpu(){
            this.spuInfo = {}
        },
        //接收spuinfo
        saveSpuInfo(spuInfo){
            this.spuInfo = spuInfo
        },
        //接收id
        getId(params){
            this.categoryIdList.c1Id = params.category1Id
            this.categoryIdList.c2Id = params.category2Id
            this.categoryIdList.c3Id = params.category3Id
        }
    },
    components:{
        category,spuList,spuForm,skuForm
    }
}
</script>

<style lang="less" scoped>

</style>